<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
	isLoading: Boolean,
	selectedElements: Array,
	elementalGroup: String,
})

const emit = defineEmits(['on-submit'])

const formRef = ref(null)

// 判断是二元还是三元计算
const isLength = computed(() => props.selectedElements?.length)

// 表单数据
const form = ref({
	pressure: 101325,
	temp: 600,
	first: '', // 第一个元素
	second: '', // 第二个元素
	fxmin: 0,
	fxmax: 1,
	fxstep: 0.01,
	sxmin: 0,
	sxmax: 1,
	sxstep: 0.01,
	// 二元特有参数
	tmin: 300,
	tmax: 800,
	tstep: 100,
	// 四元特有参数
	third: '', // 第三个元素
	component: 0.01, // 成分
	step: 0.05, // 步长
})

// 验证规则
const validationRules = computed(() => {
	const baseRules = {
		pressure: [
			{
				required: true,
				message: '请输入压强',
				trigger: 'blur',
			},
		],
		temp: [
			{
				required: true,
				message: '请输入温度',
				trigger: 'blur',
			},
		],
	}

	if (isLength.value === 2) {
		return {
			...baseRules,
			tmin: [{ required: true, message: '请输入最小温度', trigger: 'blur' }],
			tmax: [{ required: true, message: '请输入最大温度', trigger: 'blur' }],
			tstep: [{ required: true, message: '请输入温度步长', trigger: 'blur' }],
		}
	} else if (isLength.value === 3) {
		return {
			...baseRules,
			first: [{ required: true, message: '请选择X轴元素', trigger: 'blur' }],
			fxmin: [{ required: true, message: '请输入最小成分', trigger: 'blur' }],
			fxmax: [{ required: true, message: '请输入最大成分', trigger: 'blur' }],
			fxstep: [{ required: true, message: '请输入步长', trigger: 'blur' }],
			second: [{ required: true, message: '请选择Y轴元素', trigger: 'blur' }],
			sxmin: [{ required: true, message: '请输入最小成分', trigger: 'blur' }],
			sxmax: [{ required: true, message: '请输入最大成分', trigger: 'blur' }],
			sxstep: [{ required: true, message: '请输入步长', trigger: 'blur' }],
		}
	} else if (isLength.value === 4) {
		return {
			...baseRules,
			first: [{ required: true, message: '请选择X轴元素', trigger: 'blur' }],
			second: [{ required: true, message: '请选择Y轴元素', trigger: 'blur' }],
			third: [{ required: true, message: '请选择Z轴元素', trigger: 'blur' }],
			component: [{ required: true, message: '请输入成分', trigger: 'blur' }],
			step: [{ required: true, message: '请输入步长', trigger: 'blur' }],
		}
	}
})

// 可选的X轴元素（第一元素）
const availableFirstElements = computed(() => {
	return (
		props.selectedElements?.filter(
			(el) => ![form.value.second, form.value.third].includes(el)
		) || []
	)
})

// 可选的Y轴元素（第二元素）
const availableSecondElements = computed(() => {
	return (
		props.selectedElements?.filter(
			(el) => ![form.value.first, form.value.third].includes(el)
		) || []
	)
})

// 可选的Z轴元素（第三元素）
const availableThirdElements = computed(() => {
	return (
		props.selectedElements?.filter(
			(el) => ![form.value.first, form.value.second].includes(el)
		) || []
	)
})
// 提交表单
const submitForm = async () => {
	try {
		await formRef.value.validate()

		const submitData = {
			tdb: props.elementalGroup + '.tdb',
			elements: props.selectedElements,
			pressure: form.value.pressure,
			temp: form.value.temp,
		}

		if (isLength.value === 2) {
			// 二元相图参数
			submitData.tmin = form.value.tmin
			submitData.tmax = form.value.tmax
			submitData.tstep = form.value.tstep

			submitData.xmin = form.value.fxmin
			submitData.xmax = form.value.fxmax
			submitData.xstep = form.value.fxstep
		} else if (isLength.value === 3) {
			// 三元相图参数
			submitData.first = form.value.first.toUpperCase()
			submitData.fxmin = form.value.fxmin
			submitData.fxmax = form.value.fxmax
			submitData.fxstep = form.value.fxstep

			submitData.second = form.value.second.toUpperCase()
			submitData.sxmin = form.value.sxmin
			submitData.sxmax = form.value.sxmax
			submitData.sxstep = form.value.sxstep
		} else if (isLength.value === 4) {
			// 四元相图参数
			submitData.first = form.value.first.toUpperCase()
			submitData.second = form.value.second.toUpperCase()
			submitData.third = form.value.third.toUpperCase()
			submitData.component = form.value.component
			submitData.step = form.value.step
		}

		emit('on-submit', {
			...submitData,
		})
	} catch (error) {
		ElMessage.error('请检查表单输入')
	}
}

// 重置表单
const resetForm = () => {
	formRef.value?.resetFields()
	form.value = {
		pressure: 101325,
		temp: 600,
		first: '',
		second: '',
		fxmin: 0,
		fxmax: 1,
		fxstep: 0.01,
		sxmin: 0,
		sxmax: 1,
		sxstep: 0.01,
		tmin: 300,
		tmax: 800,
		tstep: 100,
	}
}
</script>

<template>
	<div class="component-form">
		<el-form
			ref="formRef"
			:model="form"
			:rules="validationRules"
			label-width="100px"
		>
			<el-form-item label="温度(K)" prop="temp" v-if="isLength !== 2">
				<div class="tempStyle">
					<el-input-number
						v-model="form.temp"
						:precision="2"
						:min="298.15"
						:max="2000"
						placeholder="600"
						:controls="false"
						class="inputNumber"
					/>
					<span class="text">温度(K)：289.15K ～ 2000K</span>
				</div>
			</el-form-item>

			<el-form-item label="压强(Pa)" prop="pressure">
				<el-input-number
					v-model="form.pressure"
					:precision="0"
					:min="0"
					placeholder="101325"
					:controls="false"
					class="inputNumber"
				/>
			</el-form-item>

			<!-- 二元相图特有参数 -->
			<div v-if="isLength === 2">
				<el-form-item label="最小温度(K)" prop="tmin">
					<div class="tempStyle">
						<el-input-number
							v-model="form.tmin"
							:precision="2"
							:min="298.15"
							:max="Math.min(form.tmax ?? 2000, 2000)"
							placeholder="300"
							:controls="false"
							class="inputNumber"
						/>
						<span class="text">最小温度 ≥ 298.15</span>
					</div>
				</el-form-item>

				<el-form-item label="最大温度(K)" prop="tmax">
					<div class="tempStyle">
						<el-input-number
							v-model="form.tmax"
							:precision="2"
							:min="Math.max(form.tmin ?? 298.15, 298.15)"
							:max="2000"
							placeholder="800"
							:controls="false"
							class="inputNumber"
						/>
						<span class="text">最大温度 ≤ 2000</span>
					</div>
				</el-form-item>

				<el-form-item label="温度步长" prop="tstep">
					<el-input-number
						v-model="form.tstep"
						:precision="0"
						:min="0"
						:max="100"
						placeholder="100"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>
			</div>

			<!-- 三元相图特有参数 -->
			<div v-if="isLength === 3">
				<el-form-item label="X轴元素" prop="first">
					<el-select
						v-model="form.first"
						placeholder="请选择X轴元素"
						style="width: 100%"
						clearable
					>
						<el-option
							v-for="el in availableFirstElements"
							:key="el"
							:label="el"
							:value="el"
						/>
					</el-select>
				</el-form-item>
			</div>

			<div v-if="[2, 3].includes(isLength)">
				<el-form-item label="最小成分" prop="fxmin">
					<el-input-number
						v-model="form.fxmin"
						:precision="4"
						:min="0.0001"
						:max="Math.max(form.fxmax ?? 0, 0.9999)"
						placeholder="0"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>

				<el-form-item label="最大成分" prop="fxmax">
					<el-input-number
						v-model="form.fxmax"
						:precision="4"
						:min="Math.min(form.fxmin ?? 0.9999)"
						:max="0.9999"
						placeholder="1"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>

				<el-form-item label="成分步长" prop="fxstep">
					<el-input-number
						v-model="form.fxstep"
						:precision="2"
						:min="0.01"
						:max="1"
						placeholder="0.01"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>
			</div>

			<!-- Y轴范围仅在三元时显示 -->
			<div v-if="isLength === 3">
				<el-form-item label="Y轴元素" prop="second">
					<el-select
						v-model="form.second"
						placeholder="请选择Y轴元素"
						style="width: 100%"
						clearable
					>
						<el-option
							v-for="el in availableSecondElements"
							:key="el"
							:label="el"
							:value="el"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="最小成分" prop="sxmin">
					<el-input-number
						v-model="form.sxmin"
						:precision="4"
						:min="0.0001"
						:max="Math.min(form.sxmax ?? 0.9999)"
						placeholder="0"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>

				<el-form-item label="最大成分" prop="sxmax">
					<el-input-number
						v-model="form.sxmax"
						:precision="4"
						:min="Math.max(form.sxmin ?? 0.0001, 0.0001)"
						:max="0.9999"
						placeholder="1"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>

				<el-form-item label="成分步长" prop="sxstep">
					<el-input-number
						v-model="form.sxstep"
						:precision="2"
						:min="0.01"
						:max="1"
						placeholder="0.01"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>
			</div>

			<div v-if="isLength === 4">
				<el-form-item label="X轴元素" prop="second">
					<el-select
						v-model="form.second"
						placeholder="请选择X轴元素"
						style="width: 100%"
						clearable
					>
						<el-option
							v-for="el in availableSecondElements"
							:key="el"
							:label="el"
							:value="el"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="Y轴元素" prop="third">
					<el-select
						v-model="form.third"
						placeholder="请选择Y轴元素"
						style="width: 100%"
						clearable
					>
						<el-option
							v-for="el in availableThirdElements"
							:key="el"
							:label="el"
							:value="el"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="固定元素" prop="first">
					<el-select
						v-model="form.first"
						placeholder="请选择固定元素"
						style="width: 100%"
						clearable
					>
						<el-option
							v-for="el in availableFirstElements"
							:key="el"
							:label="el"
							:value="el"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="成分" prop="component">
					<el-input-number
						v-model="form.component"
						:precision="4"
						:min="0"
						:max="1"
						placeholder="1"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>

				<el-form-item label="步长" prop="step">
					<el-input-number
						v-model="form.step"
						:precision="4"
						:min="0"
						:max="1"
						placeholder="1"
						:controls="false"
						class="inputNumber"
					/>
				</el-form-item>
			</div>
		</el-form>

		<div class="form-actions">
			<el-button size="small" @click="resetForm">重置</el-button>
			<el-button
				type="primary"
				size="small"
				:loading="isLoading"
				@click="submitForm"
			>
				计算
			</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss">
.form-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;

	:deep(.el-button) {
		flex: 1;
	}
}
// 表单验证错误状态
:deep(.el-form-item) {
	margin-bottom: 20px !important;
	.el-form-item__error {
		display: block !important;
	}
}

:deep(.inputNumber) {
	width: 100% !important;
	.el-input__wrapper {
		padding: 1px 11px !important;
		.el-input__inner {
			text-align: left;
		}
	}
}

.tempStyle {
	position: relative;
	width: 100%;
	.text {
		position: absolute;
		font-size: 0.75rem;
		bottom: -26.7px;
		right: 0;
	}
}
</style>

<style>
@import url('@/styles/element-plus/form.scss');
</style>
